<template>
  <div class="settingBox clearfix">
    <el-form class="m7-form setting" size="mini" :model="settingData"
      ref="satisfactionForm" label-position="top">
      <el-form-item label="评价邀请文案" prop="satisfyTitle">
        <el-dropdown size="mini" type="primary" @command="dropDownFun('satisfyTitle', $event)">
          <span class="dropBtn">
            占位符<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="座席名称">座席名称</el-dropdown-item>
            <el-dropdown-item command="座席工号">座席工号</el-dropdown-item>
            <el-dropdown-item command="座席昵称">座席昵称</el-dropdown-item>
            <el-dropdown-item command="访客名称">访客名称</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-input
          style="marginTop: 10px"
          type="textarea"
          v-model.trim="settingData.satisfyTitle"
          placeholder="请您对我的服务做出评价"
          size="mini"
          maxlength="50"
          show-word-limit>
        </el-input>
      </el-form-item>
      <el-form-item label="评价感谢文案" prop="satisfyThank">
        <el-dropdown size="mini" type="primary" @command="dropDownFun('satisfyThank', $event)">
          <span class="dropBtn">
            占位符<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="座席名称">座席名称</el-dropdown-item>
            <el-dropdown-item command="座席工号">座席工号</el-dropdown-item>
            <el-dropdown-item command="座席昵称">座席昵称</el-dropdown-item>
            <el-dropdown-item command="访客名称">访客名称</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-input
          style="marginTop: 10px"
          type="textarea"
          v-model.trim="settingData.satisfyThank"
          placeholder="感谢您的评价！"
          size="mini"
          maxlength="50"
          show-word-limit>
        </el-input>
      </el-form-item>
      <el-form-item label="满意度时效/h">
        <div>
          <span class="prompt">超过设置时效将不可再评价</span>
          <el-switch
            v-model="settingData.isAging"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <el-input v-model="settingData.agingTimeout" type="number" class="agingTimeout" @blur="iptBlur"></el-input>
      </el-form-item>
      <el-form-item label="评价场景设置">
        <el-checkbox class="checkbox" v-model="settingData.isSystemClosePushCsr">系统自动结束会话</el-checkbox>
        <div>
          <el-checkbox class="checkbox" v-model="settingData.isAgentClosePushCsr">座席结束会话</el-checkbox>
        </div>
        <div>
          <el-checkbox class="checkbox" v-model="settingData.isCustomerClosePushCsr">访客结束会话</el-checkbox>
        </div>
        <div>
          <el-checkbox class="checkbox" v-model="settingData.isAgentPushCsr">座席主动邀评</el-checkbox>
        </div>
        <div>
          <el-checkbox class="checkbox" v-model="settingData.isCustomerPushCsr">访客主动评价</el-checkbox>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  name: 'satisfactionSetting'
})
export default class SatisfactionSetting extends Vue {
  @Prop() private settingData: any
  private $message: any

  private dropDownFun (type: string, command: string) {
    this.settingData[type] = this.settingData[type] + `{${command}}`
  }

  private iptBlur () {
    if (this.settingData.agingTimeout < 0) {
      this.settingData.agingTimeout = 0
      this.$message.error('满意度时效不许为负数')
    }
    if (this.settingData.agingTimeout > 7 * 24) {
      this.settingData.agingTimeout = 0
      this.$message.error('满意度时效不许大于7*24小时')
    }
  }
}
</script>
<style lang="stylus" scoped>
  .settingBox
    margin-top 15px
    .prompt
      color #767E91
      font-size 12px
      margin-right 24px
    .agingTimeout
      width 25%
    .dropBtn
      background #E5F3FD
      border none
      padding 6px 11px
      border-radius 4px
      color #008BEE
      cursor pointer
      margin-bottom 10px
</style>
